<template>
<div class="cardList">
    <av-page-header title="基础详情页">
        <div slot="breadcrumb">
            <a-breadcrumb>
                <a-breadcrumb-item>
                    <a >首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>
                    <a >列表页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>基础详情页</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
    </av-page-header>
    <a-card :bordered="false">

        <description-list size="large" title="退款申请" style="margin-bottom: 32px">
            <description term="取货单号">1000000000</description>
            <description term="状态">已取货</description>
            <description term="销售单号">1234123421</description>
            <description term="子订单">3214321432</description>
        </description-list>
        <a-divider style="margin-bottom: 32px" />
        <description-list size="large" title="用户信息" style="margin-bottom: 32px">
            <description term="用户姓名">付小小</description>
            <description term="联系电话">18100000000</description>
            <description term="常用快递">菜鸟仓储</description>
            <description term="取货地址">浙江省杭州市西湖区万塘路18号</description>
            <description term="备注">无</description>
        </description-list>
        <!---->
        <a-divider style="margin-bottom: 32px" />
        <div class="title">退货商品</div>
        <!--:columns="goodsColumns"-->
        <a-table style="margin-bottom: 24px" :pagination="false" :loading="loading" :dataSource="goodsData" rowKey="id" :columns="goodsColumns">
            <!--
            <a-table-column dataIndex="name" key="name" title="商品名称">
            </a-table-column>
            <a-table-column dataIndex="barcode" key="barcode" title="商品条码">
            </a-table-column>
            <a-table-column dataIndex="price" key="price" title="单价">
            </a-table-column>
            <a-table-column dataIndex="num" key="num" title="数量（件）">
            </a-table-column>
            <a-table-column dataIndex="amount" key="amount" title="金额">
            </a-table-column>

            
          columns={goodsColumns}
            <a-table-column
                  dataIndex="title"
                  key="title"
                  title="规则名称"
                >
                </a-table-column>
                -->
        </a-table>
        <div class="title">退货进度</div>
        <a-table style="margin-bottom: 16px" :pagination="false" :loading="loading" :dataSource="basicProgress" :columns="progressColumns">
            <!-- columns={progressColumns}-->
            <!--
            <a-table-column dataIndex="time" key="time" title="时间">
            </a-table-column>
            <a-table-column dataIndex="rate" key="rate" title="当前进度">
            </a-table-column>
            <a-table-column dataIndex="status" key="status" title="状态">

                <template slot-scope="text,record">
                    <a-badge v-if="text==='success'" status="success" text="成功" />
                    <a-badge v-else status="processing" text="进行中" />
                </template>
            </a-table-column>
            <a-table-column dataIndex="operator" key="operator" title="操作员ID">
            </a-table-column>
            <a-table-column dataIndex="cost" key="cost" title="耗时">
            </a-table-column>
            -->
        </a-table>
    </a-card>

</div>
</template>

<script lang="tsx">
import {
    Component,
    Prop,
    Vue,
} from 'vue-property-decorator';
import {
    State,
    Mutation,
    namespace,
} from 'vuex-class';

import DescriptionList from '@/components/descriptionlist/DescriptionList.vue';
import Description from '@/components/descriptionlist/Description.vue';

import moment from 'moment';
import axios from 'axios';

@Component({
    components: {
        DescriptionList,
        Description,
    },
})
export default class BasicDetail extends Vue {

    private loading: boolean = false;

    private basicProgress: any[] = [];

    private goodsData: any[] = [];

    private goodsColumns = [{
        title: '商品编号',
        dataIndex: 'id',
        key: 'id',
        customRender: this.goodsIdRender,
    }, {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
        customRender: this.renderContent,
    }, {
        title: '商品条码',
        dataIndex: 'barcode',
        key: 'barcode',
        customRender: this.renderContent,
    }, {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
        customRender: this.renderContent,
    }, {
        title: '数量（件）',
        dataIndex: 'num',
        key: 'num',
        align: 'right',
        customRender: this.goodsNumRender,
    }, {
        title: '金额',
        dataIndex: 'amount',
        key: 'amount',
        align: 'right',
        customRender: this.goodsAmountRender,
    } ];

    private progressColumns = [
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
    },
    {
        title: '当前进度',
        dataIndex: 'rate',
        key: 'rate',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        customRender: this.progressStateRender,
    },
    {
        title: '操作员ID',
        dataIndex: 'operator',
        key: 'operator',
    },
    {
        title: '耗时',
        dataIndex: 'cost',
        key: 'cost',
    },
    ];

    private mounted(): void {
        axios.get('/api/profile/basic').then((res: any) => {
            const data = res.data;
            this.basicProgress = data.basicProgress;
            this.goodsData = data.basicGoods;

            if (data.basicGoods.length) {
                let num = 0;
                let amount = 0;
                data.basicGoods.forEach((item: any) => {
                    num += Number(item.num);
                    amount += Number(item.amount);
                });
                this.goodsData = data.basicGoods.concat({
                    id: '总计',
                    num,
                    amount,
                });
            }
        });
    }

    private renderContent(value: any, row: any, index: number) {
        const obj = {
            children: value,
            attrs: {
                colSpan: 1,
            },
        };
        if (row.id === '总计') {
            obj.attrs.colSpan = 0;
        }
        return obj;
    }

    private goodsIdRender(text: any, record: any, index: any) {
        if (record.id !== '总计') {
            return <a href = '#' > {text} </a>;
        }
        return {
            children: <span style = 'font-weight:600' > 总计 </span>,
            attrs: {
                colSpan: 4,
            },
        };
    }

    private goodsNumRender(text: any, record: any, index: any) {
        if (record.id !== '总计') {
            return text;
        }
        return <span style = 'font-weight:600' > {text} </span>;
    }

    private goodsAmountRender(text: string, record: any, index: any) {
        if (record.id !== '总计') {
            return text;
        }
        return <span style = 'font-weight:600' > {text} </span>;
    }

    private progressStateRender(text: string, record: any, index: any) {
        if (text === 'success') {
            return <a-badge status = 'success' text = '成功' />;
        }
        return <a-badge status = 'processing' text = '进行中' />;
    }
}
</script>

<style lang="less">
@import '../../assets/theme/styles/index.less';

.title {
    color: @heading-color;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}
</style>
